<%--
  Created by IntelliJ IDEA.
  User: jia19
  Date: 2015/9/27
  Time: 22:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
    <title>网络购书系统--注册</title>
    <%@include file="../layout/import.jsp"%>
    <script type="text/javascript">
        function submit()
        {
            $.ajax({
                url: "/donereg.do",
                data: $('#userInfoForm').serialize(),
                method: "POST",
                dataType: "json",
                error: function () {
                    alert("表单提交出错，请稍后再试");
                },
                success: function(response) {
                    if(response.code == 0) {
                        alert("注册成功！");
                        window.location.href = "/index.do";
                    }
                    else {
                        alert(response.description);
                    }
                }
            });
        }
        function userNameValidate(name)
        {
            $.ajax({
               url: "/usernameValidate.do",
               data: {
                   username: name
               },
               method: "POST",
               dataType: "json",
               success: function (response) {
                   if(response.code == 0) {
                        $('#resultDiv').html("<span class='text-success'>用户名可用</span>");
                   }
                   else {
                       $('#resultDiv').html("<span class='text-danger'>用户名已存在</span>");
                   }
               }
            });
        }
    </script>
</head>
<body>
<%@include file="nav.jsp"%>

<div class="container" style="min-height: 90%">
    <div class="col-sm-6 col-sm-offset-3">
        <h1 class="text-center">注册</h1>
        <br />
        <form class="form-horizontal" id="userInfoForm">
            <div class="form-group">
                <label class="col-sm-2" for="username">用户名</label>
                <div class="col-sm-7">
                <input type="text" class="form-control" id="username" onblur="userNameValidate(this.value)" name="username" placeholder="请输入您的用户名">
                </div>
                <div class="col-sm-3" id="resultDiv">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="password">密码</label>
                <div class="col-sm-7">
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="gender">性别</label>
                <div class="col-sm-7">
                <select class="form-control" id="gender" name="gender">
                    <option>男</option>
                    <option>女</option>
                </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="address">住址</label>
                <div class="col-sm-7">
                <input type="text" class="form-control" id="address" name="address" placeholder="请输入您的住址">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="postcode">邮编</label>
                <div class="col-sm-7">
                <input type="text" class="form-control" id="postcode" name="postcode" placeholder="请输入您的邮编">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="tel">联系电话</label>
                <div class="col-sm-7">
                <input type="tel" class="form-control" id="tel" name="phone" placeholder="请输入您的联系电话">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="email">Email</label>
                <div class="col-sm-7">
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的Email">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-8">
            <a class="btn btn-primary" onclick="submit()">注册新用户</a>
            <button type="reset" class="btn btn-default">重新填写</button>
            </div>
        </form>
    </div>
</div>
<%@include file="footer.jsp"%>
</body>
</html>
